<template>
    <div :class="{ hidden: hidden }" class="pagination-container">
        <el-pagination
            data-pagination
            popper-class="pop-select"
            :background="background"
            :current-page.sync="currentPage"
            :page-size.sync="pageSize"
            :layout="layout"
            :page-sizes="pageSizes"
            :pager-count="pagerCount"
            :total="total"
            v-bind="$attrs"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<script>
export default {
    name: 'Pagination',
    props: {
        total: {
            required: true,
            type: Number
        },
        current: {
            type: Number,
            default: 1
        },
        size: {
            type: Number,
            default: 20
        },
        pageSizes: {
            type: Array,
            default () {
                return [5, 10, 15, 20, 50];
            }
        },
        // 移动端页码按钮的数量端默认值5
        pagerCount: {
            type: Number,
            default: document.body.clientWidth < 992 ? 5 : 7
        },
        layout: {
            type: String,
            default: 'total, sizes, prev, pager, next, jumper'
        },
        background: {
            type: Boolean,
            default: true
        },
        autoScroll: {
            type: Boolean,
            default: true
        },
        hidden: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {};
    },
    computed: {
        currentPage: {
            get () {
                return this.current;
            },
            set (val) {
                this.$emit('update:current', val);
            }
        },
        pageSize: {
            get () {
                return this.size;
            },
            set (val) {
                this.$emit('update:size', val);
            }
        }
    },
    methods: {
        handleSizeChange (val) {
            this.$emit('pagination', { pageIndex: this.currentPage, pageSize: val });
        },
        handleCurrentChange (val) {
            this.$emit('pagination', { pageIndex: val, pageSize: this.pageSize });
        }
    }
};
</script>
<style lang="scss"></style>
<style lang="scss" scoped>
.pagination-container {
    height: 32px;
    text-align: center;
    border: 2px solid #01316b;
    border-top: none;
    padding: 10px 20px;
    ::v-deep .el-pagination {
        span {
            float: left;
            color: #9da5b6;
            &:last-child {
                float: right;
            }
        }
        button {
            background: #00336e;
            color: #fff;
        }
        .el-pagination__editor {
            position: relative;
            margin-left: 10px;
            .el-input__inner {
                border: 1px solid #04376f;
            }
            &::after {
                content: "→";
                font-size: 20px;
                position: absolute;
                top: 0;
                right: -35px;
                width: 38px;
                height: 28px;
                line-height: 28px;
                cursor: pointer;
                color: #fff;
                background: #093870;
            }
        }
        .el-pagination__editor:hover::after {
            background: #154c8f;
        }
        .el-pagination__editor:active::after {
            background: #093870;
        }
    }
    ::v-deep .el-pagination__total {
        margin-right: 0;
    }
    ::v-deep .el-input__inner {
        height: 28px !important;
    }
}
.pagination-container.hidden {
    display: none;
}

</style>
